<template>
	<view>
		<h-page-meta></h-page-meta>
		<view id="top">
			<view class="status_bar bg-FF"></view>
			<view class="flex bg-FF pd-30 flex-ac" style="position: sticky;top: 0;">
				<h-navigateBack></h-navigateBack>
				<view class="pd-30 flex flex-ac" style="background-color: #F6F6F6;margin-left: 20rpx;width: 100%;border-radius: 50rpx">
					<u-icon name="search" size="40" color="#999"></u-icon>
					<input placeholder-class="placeholderclass" placeholder="请输入您想要去的地方" style="width: 90%;margin-left: 10rpx;" />
				</view>
			</view>
			<view class="pd-30 fs-30 fc-main fw-600">热门</view>
			<view class="flex width-750" style="background-color: #F6F6F6;" :style="{ height: scroll_height + 'px' }">
				<view class="left">
					<scroll-view scroll-y="true" :style="{ height: scroll_height + 'px' }">
						<view class="left-item ellipsis fs-32"  v-for="(item, index) in stationArray" :key="index" :data-index="index" @click="leftChange(index)">
							<view  :class="leftIndex == index ? 'left-active fs-36' : ''">{{ item.cityName }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="right">
					<swiper :style="{ height: scroll_height + 'px' }" :current="leftIndex" @change="swiperChange" vertical="true" duration="300">
						<swiper-item v-for="(item, index) in stationArray" :key="index">
							<scroll-view scroll-y="true" :style="{ height: scroll_height + 'px' }">
								<u-empty text="暂无数据" :show="mainArray[leftIndex].length==0"></u-empty>
								<view class="flex flex-ac fs-32 fc-999" style="margin-top: 30rpx;">
									<view class="circle-hui"></view>
									<view>{{item.cityName}}</view>
								</view>
								<view class="right-item ellipsis fs-32"  v-for="(item2, index2) in mainArray[leftIndex]" :key="index2" @tap="selectSite(item2)">
									<view>{{ item2.cityName }}</view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
export default {
	data() {
		return {
			stationArray: [
				{ cityName: '福州' },
				{ cityName: '莆田' },
				{ cityName: '泉州' },
				{ cityName: '厦门' },
				{ cityName: '漳州' },
				{ cityName: '龙岩' },
				{ cityName: '三明' },
				{ cityName: '南平' },
				{ cityName: '宁德' }
			],
			mainArray: [[{ cityName: '福清' }],
			[{ cityName: '莆田' }],
			[{ cityName: '丰泽' }, { cityName: '南安' }, { cityName: '惠安' }],
			[{ cityName: '厦门' }, { cityName: '梧村' }],
			[{ cityName: '芗城区' }],
			[{ cityName: '长汀' }, { cityName: '新罗' }],
			[],
			[{ cityName: '福康苑A区（武夷新区）' }, { cityName: '高铁延平站' }, { cityName: '和谐苑E区（武夷新区）' }],
			[]],
			scroll_height: 0,
			leftIndex: 0,
			type:"",
		};
	},
	onLoad(param) {
		this.type=param.type;
	},
	mounted() {
		var that = this;
		const query = uni.createSelectorQuery().in(this);
		//-------获取滚动栏的高度
		query
			.select('#top')
			.boundingClientRect(data => {
				uni.getSystemInfo({
					success: res => {
						that.scroll_height = res.windowHeight - data.height;
					}
				});
			})
			.exec();
	},
	methods: {
		goBack(){
			uni.navigateBack()
		},
		swiperChange(e) {
			this.leftIndex = e.detail.current;
		},
		leftChange(e) {
			this.leftIndex = e;
		},
		selectSite(e){
			if(this.type=="START"){
				uni.$emit("START",e.cityName);
			}else if(this.type=="END"){
				uni.$emit("END",e.cityName);
			}
			uni.navigateBack();
		}
	}
};
</script>

<style>
.left {
	width: 25%;
}
.left-item {
	width: 100%;
	text-align: center;
	height: 100rpx;
	line-height: 100rpx;
	color: #333;
	font-weight: 600;
	letter-spacing: 2rpx;
}
.left-active {
	font-weight: 800;
	background-color: #FFF;
	border-left: solid 10rpx #fc4646;
}
.right {
	width: 75%;
	background-color: #fff;
}
.right-item {
	text-align: left;
	margin: 0 40rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: #333;
	font-weight: 600;
	letter-spacing: 2rpx;
	border-bottom: solid 1rpx #DCDCDC;
}
.circle-hui{
	margin: 0 20rpx 0 40rpx;
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	background-color: #999;
}
</style>
